<#include "layout/template.ftl"/>

<@htmlHead title="新增楼层详细">
   <style>
    	.remove-btn{
			position: absolute;
			top: -15px;
			right: -15px;
			font-size: 12px;
			background: #FFF;
			padding: 0px;
			border: 3px solid #FF9900;
			border-radius: 50%;
			text-align: center;
			width: 24px;
			height: 24px;
    	}
    	
    	.upload-label{
    		display: block;
			position: absolute;
			top: 0;
			left: 15px;
			right: 15px;
			height: 30px;
			background-color: #fff;
			border: 1px solid #d5d5d5;
			cursor: pointer;
			-webkit-box-shadow: none;
			box-shadow: none;
			-webkit-transition: all .15s;
			transition: all .15s;
			padding-left: 10px;
			padding-right: 0px;
    	}
    	
    	
    	.upload-input{
    		z-index: 99;
    		opacity: 0;
    		height: 30px;
    		padding: 0px;
    		position: absolute;
    	}
    	
    	
    	.file-name{
    		display: inline-block;
			height: 28px;
			max-width: 80%;
			white-space: nowrap;
			overflow: hidden;
			line-height: 28px;
			color: #888;
			font-size: 13px;
			vertical-align: top;
			position: static;
    	}
    	
    	.choose-btn{
    		float: right;
			background: #0099cc;
			color: #FFF;
			display: block;
			padding: 0px 10px;
			font-size: 14px;
			height: 28px;
			line-height: 28px;
    	}
    	
    	.uploadicon{
    		display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			line-height: 24px;
			width: 26px;
			text-align: center;
			font-family: FontAwesome;
			font-size: 13px;
			border: 2px solid #FFF;
			color: #FFF;
			-webkit-transition: all .1s;
			transition: all .1s;
			background-color: #d1d1d1;
    	}
    	#visible-list-1 li{border: 1px dashed #FF9900;padding:5px;margin:10px 0px;}
    	#visible-list-2 li{border: 1px dashed #FF9900;padding:5px;margin:10px 0px;}
    	.show-img-panel{width:100%;position: relative;}
    	.show-img-panel img{width: 60px; height: 50px;}
    	/* 商品封面 */
    	.settingView{
			float:left;
			width:120px;
			height:120px;
			margin-bottom:10px;
			border:1px solid #CCC;
			background:#DDD;
			position: relative;
			background:url('');
		}
		
		.settingView img{
			border: none;
			width: 110px;
			height: 110px;
			margin: 5px;
		}
		
		.picinput{
			opacity: 0;
			width:100%;
			height:110px;
			position: absolute;
			top:0px;
			left:0px;
		}

    </style>
     
 	<link rel="stylesheet" href="${resources}/assets/css/flooritem-selectbox.css" />
</@htmlHead>


 
<@htmlBody 'page' 'floorManage'>

	<!-- breadcrumbs begin -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '商城页面管理' '楼层管理'></@breadcrumbs>
	<!-- breadcrumbs end -->

	<!-- page-content begin -->
	<div class="page-content">
			
			<!-- page-header begin -->
			<div class="page-header">
				<h1>
					新增楼层详细
				</h1>
			</div>
			<!-- page-header end -->

			<!-- page-body begin -->
			<div class="row">	
				<div class="col-md-6">
				
						<!-- 表单开始 -->
						<form class="form-horizontal" id="validation-form" method="post" action="${path}/manage/page/floorItem/create" >
							
							<fieldset>
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name">所属楼层:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="hidden" name="floor.id"  value="${floor.id}" />
											<p class="form-control-static">${floor.name}</p>
										</div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name"><em style="color:red">*</em>排序:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入排序" name="seq"  id="seq"  value="" />
										</div>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name"><em style="color:red">*</em>链接地址:</label>
									<div class="col-md-10">
										<div class="clearfix" >
											 <input type="text" id="text" name="linkurl" value="" />
									
											<p class="form-control-static" style="color:red">限时抢购请配置连接 /xtc/goods/index/1</p>
											<p class="form-control-static" style="color:red">天天特价请配置连接 /xtc/goods/index/2</p>
											<p class="form-control-static" style="color:red">超低折扣请配置连接 /xtc/goods/index/3</p>
											<p class="form-control-static" style="color:red">满立减请配置连接 /commodity/index/3</p>
											<p class="form-control-static" style="color:red">商户配置连接 /vouchermarket/merchant/商户id</p>
										</div>
									</div>
								</div>	
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name"><em style="color:red">*</em>楼层详细标题:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入楼层详细标题" name="name"  id="name" value="" />
										</div>
									</div>
								</div>

		               	 		<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="remark"><em style="color:red">*</em>楼层详细图片:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<div class="settingView">
												<img id="file_0_pic" src="${floorItem.picurl}"/>
												<input class="picinput" multiple="" type="file" name="file" id="file_0" data-id="file_0" data-img="file_0_pic"  data-txt="file_0_txt" onchange="addPic(this)"/>
											</div>
										</div>
										<div class="clearfix">
											<p id="picTxt" class="form-control-static" style="display:none;color:red"></p>
											<p id="specTxt" class="form-control-static" style="display:none;color:red"></p>
										</div>
									</div>
								</div>
							
								<input type="hidden" name="picurl"  id="picurl" value="" />
							
							
							</fieldset>
						</form>
						<!-- 表单结束 -->

						<!-- 提交开始 -->
	                    <div class="form-group">
	                    	<div class="col-md-8 center">
		                    	<button id="form-submit" type="button" onclick="mysubmit('validation-form')"  class="btn btn-primary">
									<i class="fa fa-save align-top bigger-125"></i>保存
								</button>
							 
								<button id="form-reset" type="button" class="btn" onclick="myreset('validation-form')">
									<i class="fa fa-pencil align-top bigger-125"></i>重置
								</button>
							</div>					
                   		</div>
						<!-- 提交结束  -->
				</div>
			</div>
			<!-- page-body end -->
		
	</div>		
	<!-- page-content end -->
</@htmlBody>



<@htmlBodyScript>
	 <script src="${resources}/assets/js/jquery-2.2.2.min.js"></script>
    <script src="${resources}/assets/js/flooritem-selectbox.js"></script>
	<script>
		function bigpic()
		{
			var sortno=$("#sortno").val();
			if(sortno=='1'){
				$("#specTxt").text("图片规格320x464").show();
			} else if(sortno != null){
				$("#specTxt").text("图片规格224x233").show();
			};
		}
	</script>
	

	<!-- 上传控件 -->
	<script type="text/javascript" src="${resources}/assets/js/ajaxfileupload.js"></script>
	<script>
	    /**
	     * 功能 : 提交表单
		 */
	 	function mysubmit(form){
	 		$("#"+form).submit();
	 	}
	 	
	 	/**
	     * 功能 : 重置页面
		 */
	 	function myreset(form){
	 		$("#"+form)[0].reset();
	 	}
	 	
	</script>

	<!-- 商品封面 -->	
	<script src="${resources}/plugins/letsun-upload/upload.js"></script>
	<script>
	function addPic(obj){
		var imgsize = obj.files[0].size;
		if(imgsize>1024*1024*1){
			$("#picTxt").text("图片大小需要小于1M").show().hide(3000);
			
			//清除文件域
			$("#file_0").after($("#file_0").clone().val(""));
			$("#file_0").remove();
		}
	}

	function showSuccess(id,url){
		$("#"+id).val(url);
		$("#picurl").val(url);
	}
	
	function showError(id,error){
		alert(error);
	}
	
	$(".picinput").uploadPreview({
		Width: 120,
		Height: 120,
		IsCompression: false,
		Url: "${path}/upload/pic",
		Success: showSuccess,
		Error:showError,
		
	});
	</script>

	<!-- 验证框架 -->	
	<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
	<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
	<script type="text/javascript">

			jQuery.validator.addMethod("isName", function(value, element) {       
	 			var corpName =  /^[\u0391-\uFFE5\w\-\s\.]{1,50}$/;
  				 return this.optional(element) || corpName.test(value);       
 			}, "请使用汉字、英文字母、数字、下划线、减号、空格或点");   
 			
	
			$('#validation-form').validate({
				errorElement: 'div',
				errorClass: 'help-block',
				focusInvalid: false,
				rules: {
					name: {
						maxlength: 50,
						isName:true,
						required:true
					},
					linkurl: {
						maxlength: 250,
						required:true
					},
					seq: {
						required:true,
						range:[1,1000]
					}
				},
						
				messages: {
				},
		
		
				highlight: function (e) {
					$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
				},
		
				success: function (e) {
					$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
					$(e).remove();
				},
		
				errorPlacement: function (error, element) {
					if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
						var controls = element.closest('div[class*="col-"]');
						if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
						else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
					}
					else if(element.is('.select2')) {
						error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
					}
					else if(element.is('.chosen-select')) {
						error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
					}
					else error.insertAfter(element.parent());
				},
		
				submitHandler: function (form) {
						form.submit();
				},
				invalidHandler: function (form) {
				}
			});
	</script>
</@htmlBodyScript>